<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Apple iOS and Android stuff (do not remove) -->
<meta name="apple-mobile-web-app-capable" content="no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />

<!-- Required Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/fonts/ptsans/stylesheet.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/fluid.css" media="screen" />

<link rel="stylesheet" type="text/css" href="css/mws.style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/icons/16x16.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/icons/24x24.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/icons/32x32.css" media="screen" />

<!-- Demo and Plugin Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/demo.css" media="screen" />

<link rel="stylesheet" type="text/css" href="plugins/colorpicker/colorpicker.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/imgareaselect/css/imgareaselect-default.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/fullcalendar/fullcalendar.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/fullcalendar/fullcalendar.print.css" media="print" />
<link rel="stylesheet" type="text/css" href="plugins/chosen/chosen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/prettyphoto/css/prettyPhoto.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/tipsy/tipsy.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/sourcerer/Sourcerer-1.2.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/jgrowl/jquery.jgrowl.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/spinner/ui.spinner.css" media="screen" />
<link rel="stylesheet" type="text/css" href="jui/css/jquery.ui.all.css" media="screen" />

<!-- Theme Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/mws.theme.css" media="screen" />

<!-- JavaScript Plugins -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="js/jquery.fileinput.js"></script>

<!-- jQuery-UI Dependent Scripts -->
<script type="text/javascript" src="jui/js/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.timepicker.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="plugins/spinner/ui.spinner.min.js"></script>

<!-- Plugin Scripts -->
<script type="text/javascript" src="plugins/imgareaselect/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="plugins/duallistbox/jquery.dualListBox-1.3.min.js"></script>
<script type="text/javascript" src="plugins/jgrowl/jquery.jgrowl-min.js"></script>
<script type="text/javascript" src="plugins/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="plugins/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="plugins/prettyphoto/js/jquery.prettyPhoto.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="plugins/flot/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript" src="plugins/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="plugins/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="plugins/flot/jquery.flot.stack.min.js"></script>
<script type="text/javascript" src="plugins/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="plugins/colorpicker/colorpicker-min.js"></script>
<script type="text/javascript" src="plugins/tipsy/jquery.tipsy-min.js"></script>
<script type="text/javascript" src="plugins/sourcerer/Sourcerer-1.2-min.js"></script>
<script type="text/javascript" src="plugins/validate/jquery.validate-min.js"></script>

<script type="text/javascript" src="plugins/elrte/js/elrte.min.js"></script>
<script type="text/javascript" src="plugins/elfinder/js/elfinder.min.js"></script>

<link rel="stylesheet" type="text/css" href="plugins/elrte/css/elrte.full.css" media="screen" />
<link rel="stylesheet" type="text/css" href="plugins/elfinder/css/elfinder.css" media="screen" />

<!-- Core Script -->
<script type="text/javascript" src="js/core/mws.js"></script>
<script type="text/javascript" src="js/core/mws.wizard.js"></script>

<!-- Themer Script (Remove if not needed) -->
<script type="text/javascript" src="js/core/themer.js"></script>

<!-- Demo Scripts (remove if not needed) -->
<script type="text/javascript" src="js/demo/demo.js"></script>
<script type="text/javascript" src="js/demo/demo.formelements.js"></script>

<title>MWS Admin - Form Elements</title>

</head>

<body>

	<!-- Themer (Remove if not needed) -->  
	<div id="mws-themer">
        <div id="mws-themer-content">
        	<div id="mws-themer-ribbon"></div>
            <div id="mws-themer-toggle"></div>
        	<div id="mws-theme-presets-container" class="mws-themer-section">
	        	<label for="mws-theme-presets">Color Presets</label>
            </div>
            <div class="mws-themer-separator"></div>
        	<div id="mws-theme-pattern-container" class="mws-themer-section">
	        	<label for="mws-theme-patterns">Background</label>
            </div>
            <div class="mws-themer-separator"></div>
            <div class="mws-themer-section">
                <ul>
                    <li class="clearfix"><span>Base Color</span> <div id="mws-base-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Highlight Color</span> <div id="mws-highlight-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Text Color</span> <div id="mws-text-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Text Glow Color</span> <div id="mws-textglow-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Text Glow Opacity</span> <div id="mws-textglow-op"></div></li>
                </ul>
            </div>
            <div class="mws-themer-separator"></div>
            <div class="mws-themer-section">
	            <button class="mws-button red small" id="mws-themer-getcss">Get CSS</button>
            </div>
        </div>
        <div id="mws-themer-css-dialog">
        	<form class="mws-form">
            	<div class="mws-form-row">
		        	<div class="mws-form-item">
                    	<textarea cols="auto" rows="auto" readonly="readonly"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Themer End -->

	<!-- Header -->
	<div id="mws-header" class="clearfix">
    
    	<!-- Logo Container -->
    	<div id="mws-logo-container">
        
        	<!-- Logo Wrapper, images put within this wrapper will always be vertically centered -->
        	<div id="mws-logo-wrap">
            	<img src="images/mws-logo.png" alt="mws admin" />
			</div>
        </div>
        
        <!-- User Tools (notifications, logout, profile, change password) -->
        <div id="mws-user-tools" class="clearfix">
        
        	<!-- Notifications -->
        	<div id="mws-user-notif" class="mws-dropdown-menu">
            	<a href="#" class="mws-i-24 i-alert-2 mws-dropdown-trigger">Notifications</a>
                
                <!-- Unread notification count -->
                <span class="mws-dropdown-notif">35</span>
                
                <!-- Notifications dropdown -->
                <div class="mws-dropdown-box">
                	<div class="mws-dropdown-content">
                        <ul class="mws-notifications">
                        	<li class="read">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="read">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <div class="mws-dropdown-viewall">
	                        <a href="#">View All Notifications</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Messages -->
            <div id="mws-user-message" class="mws-dropdown-menu">
            	<a href="#" class="mws-i-24 i-message mws-dropdown-trigger">Messages</a>
                
                <!-- Unred messages count -->
                <span class="mws-dropdown-notif">35</span>
                
                <!-- Messages dropdown -->
                <div class="mws-dropdown-box">
                	<div class="mws-dropdown-content">
                        <ul class="mws-messages">
                        	<li class="read">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="read">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <div class="mws-dropdown-viewall">
	                        <a href="#">View All Messages</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- User Information and functions section -->
            <div id="mws-user-info" class="mws-inset">
            
            	<!-- User Photo -->
            	<div id="mws-user-photo">
                	<img src="example/profile.jpg" alt="User Photo" />
                </div>
                
                <!-- Username and Functions -->
                <div id="mws-user-functions">
                    <div id="mws-username">
                        Hello, John Doe
                    </div>
                    <ul>
                    	<li><a href="#">Profile</a></li>
                        <li><a href="#">Change Password</a></li>
                        <li><a href="index.html">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Start Main Wrapper -->
    <div id="mws-wrapper">
    
    	<!-- Necessary markup, do not remove -->
		<div id="mws-sidebar-stitch"></div>
		<div id="mws-sidebar-bg"></div>
        
        <!-- Sidebar Wrapper -->
        <div id="mws-sidebar">
        
        	<!-- Searchbox -->
        	<div id="mws-searchbox" class="mws-inset">
            	<form action="typography.html">
                	<input type="text" class="mws-search-input" />
                    <input type="submit" class="mws-search-submit" />
                </form>
            </div>
            
            <!-- Main Navigation -->
            <div id="mws-navigation">
            	<ul>
                	<li><a href="dashboard.html" class="mws-i-24 i-home">Dashboard</a></li>
                	<li><a href="charts.html" class="mws-i-24 i-chart">Charts</a></li>
                	<li><a href="calendar.html" class="mws-i-24 i-day-calendar">Calendar</a></li>
                	<li><a href="files.html" class="mws-i-24 i-file-cabinet">File Manager</a></li>
                	<li><a href="table.html" class="mws-i-24 i-table-1">Table</a></li>
                	<li class="active">
                    	<a href="#" class="mws-i-24 i-list">Forms</a>
                        <ul>
                        	<li><a href="form_layouts.html">Layouts</a></li>
                        	<li><a href="form_elements.html">Elements</a></li>
                        </ul>
                    </li>
                	<li><a href="widgets.html" class="mws-i-24 i-cog">Widgets</a></li>
                	<li><a href="typography.html" class="mws-i-24 i-text-styling">Typography</a></li>
                	<li><a href="grids.html" class="mws-i-24 i-blocks-images">Grids &amp; Panels</a></li>
                	<li><a href="gallery.html" class="mws-i-24 i-polaroids">Gallery</a></li>
                	<li><a href="error.html" class="mws-i-24 i-alert-2">Error Page</a></li>
                	<li>
                    	<a href="icons.html" class="mws-i-24 i-pacman">
                        	Icons <span class="mws-nav-tooltip">2000+</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- Main Container Start -->
        <div id="mws-container" class="clearfix">
        
        	<!-- Inner Container Start -->
            <div class="container">
            
            	<!-- Statistics Button Container -->
            	<div class="mws-report-container clearfix">
                	
                    <!-- Statistic Item -->
                	<a class="mws-report" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-report-icon mws-ic ic-building"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-report-content">
                        	<span class="mws-report-title">Floors Climbed</span>
                            <span class="mws-report-value">324</span>
                        </span>
                    </a>

                	<a class="mws-report" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-report-icon mws-ic ic-sport"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-report-content">
                        	<span class="mws-report-title">Calories Burned</span>
                            <span class="mws-report-value down">74%</span>
                        </span>
                    </a>

                	<a class="mws-report" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-report-icon mws-ic ic-walk"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-report-content">
                        	<span class="mws-report-title">Kilometers Walked</span>
                            <span class="mws-report-value">14</span>
                        </span>
                    </a>
                    
                	<a class="mws-report" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-report-icon mws-ic ic-bug"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-report-content">
                        	<span class="mws-report-title">Bugs Fixed</span>
                            <span class="mws-report-value up">22%</span>
                        </span>
                    </a>
                    
                	<a class="mws-report" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-report-icon mws-ic ic-car"></span>

                        <!-- Statistic Content -->
                        <span class="mws-report-content">
                        	<span class="mws-report-title">Cars Repaired</span>
                            <span class="mws-report-value">77</span>
                        </span>
                    </a>
                </div>
                
                <!-- Panels Start -->
                
            	<div class="mws-panel grid_4">
                	<div class="mws-panel-header">
                    	<span class="mws-i-24 i-pencil">Text Inputs</span>
                    </div>
                    <div class="mws-panel-body">
                    	<form class="mws-form" action="form_elements.html">
                        	<div class="mws-form-inline">
                            	<div class="mws-form-row">
                                	<label>Text Field</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" class="mws-textinput" />
                                    </div>
                                </div>
                                
                            	<div class="mws-form-row">
                                	<label>Password Field</label>
                                	<div class="mws-form-item large">
                                    	<input type="password" class="mws-textinput" />
                                    </div>
                                </div>
                                
                            	<div class="mws-form-row">
                                	<label>Disabled Field</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" class="mws-textinput" disabled="disabled" />
                                    </div>
                                </div>
                                
                            	<div class="mws-form-row">
                                	<label>Read only Field</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" class="mws-textinput" value="this is a readonly field" readonly="readonly" />
                                    </div>
                                </div>
                                
                            	<div class="mws-form-row">
                                	<label>With Placeholder</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" class="mws-textinput" placeholder="your placeholder text" />
                                    </div>
                                </div>
                                
                            	<div class="mws-form-row">
                                	<label>Input with Tooltip</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" class="mws-textinput" title="input your email" />
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>    	
                </div>
                
            	<div class="mws-panel grid_4">
                	<div class="mws-panel-header">
                    	<span class="mws-i-24 i-eyedropper">Custom Inputs</span>
                    </div>
                    <div class="mws-panel-body">
                    	<form class="mws-form" action="form_elements.html">
                        	<div class="mws-form-inline">
                            	<div class="mws-form-row">
                                	<label>Basic Spinner</label>
                                	<div class="mws-form-item">
                                    	<input type="text" id="s1" class="mws-textinput" value="10" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Decimal Spinner</label>
                                	<div class="mws-form-item medium">
                                    	<input type="text" id="s2" class="mws-textinput" value="10" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Currency Spinner</label>
                                	<div class="mws-form-item small">
                                    	<input type="text" id="s3" class="mws-textinput" value="10" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Colorpicker</label>
                                	<div class="mws-form-item small">
                                    	<input type="text" class="mws-textinput mws-colorpicker" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>File Input</label>
                                	<div class="mws-form-item medium">
                                    	<input type="file" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Autocomplete</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" class="mws-autocomplete mws-textinput" />
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>    	
                </div>
                
            	<div class="mws-panel grid_8">
                	<div class="mws-panel-header">
                    	<span class="mws-i-24 i-list">Select Inputs</span>
                    </div>
                    <div class="mws-panel-body">
                    	<form class="mws-form" action="form_elements.html">
                        	<div class="mws-form-inline">                                
                    			<div class="mws-form-row">
                    				<label>Select Input with Chosen Plugin</label>
                    				<div class="mws-form-item small">
                    					<select class="chzn-select">
                    						<option>Option 1</option>
                    						<option>Option 3</option>
                    						<option>Option 4</option>
                    						<option>Option 5</option>
                    					</select>
                    				</div>
                    			</div>
                                
                    			<div class="mws-form-row">
                    				<label>Multiple Selects with Chosen Plugin</label>
                    				<div class="mws-form-item small">
                    					<select multiple="multiple" size="10" class="chzn-select">
                    						<option selected="selected">Option 1</option>
                                            <option>Option 2</option>
                    						<option>Option 3</option>
                    						<option>Option 4</option>
                    						<option>Option 5</option>
                    						<option>Option 6</option>
                    						<option selected="selected">Option 7</option>
                    						<option selected="selected">Option 8</option>
                    						<option>Option 9</option>
                    						<option>Option 10</option>
                    					</select>
                    				</div>
                    			</div>
                                
                    			<div class="mws-form-row">
                    				<label>Usual Select Input</label>
                    				<div class="mws-form-item small">
                    					<select>
                    						<option>Option 1</option>
                    						<option>Option 3</option>
                    						<option>Option 4</option>
                    						<option>Option 5</option>
                    					</select>
                    				</div>
                    			</div>
                                
                    			<div class="mws-form-row">
                    				<label>Usual Multiple Selects</label>
                    				<div class="mws-form-item small">
                    					<select multiple="multiple" size="10">
                    						<option selected="selected">Option 1</option>
                                            <option>Option 2</option>
                    						<option>Option 3</option>
                    						<option>Option 4</option>
                    						<option>Option 5</option>
                    						<option>Option 6</option>
                    						<option selected="selected">Option 7</option>
                    						<option selected="selected">Option 8</option>
                    						<option>Option 9</option>
                    						<option>Option 10</option>
                    					</select>
                    				</div>
                    			</div>
                                
                    			<div class="mws-form-row">
                    				<label>Dual List Box</label>
                    				<div class="mws-form-item large">
                                    	<div class="mws-dualbox clearfix">
                                        	<div class="mws-dualbox-col1">
                                            	<div class="mws-dualbox-filter clearfix">
                                                    <label for="box1Filter">Filter</label>
                                                    <input type="text" id="box1Filter" class="mws-textinput" />
                                                    <button type="button" id="box1Clear">X</button>
                                                </div>

                                                <select id="box1View" multiple="multiple" size="15">
                                                    <option value="501649">2008-2009 "Mini" Baja</option>
                                                    <option value="501497">AAPA - Asian American Psychological Association</option>
                                                    <option value="501053">Academy of Film Geeks</option>
                                                    <option value="500001">Accounting Association</option>
                                                    <option value="501227">ACLU</option>
                                                    <option value="501610">Active Minds</option>
                                                    <option value="501514">Activism with A Reel Edge (A.W.A.R.E.)</option
                                                    ><option value="501656">Adopt a Grandparent Program</option>
                                                    <option value="501050">Africa Awareness Student Organization</option>
                                                    <option value="501075">African Diasporic Cultural RC Interns</option>
                                                    <option value="501493">Agape</option>
                                                    <option value="501562">AGE-Alliance for Graduate Excellence</option>
                                                    <option value="500676">AICHE (American Inst of Chemical Engineers)</option>
                                                    <option value="501460">AIDS Sensitivity Awareness Project ASAP</option>
                                                    <option value="500004">Aikido Club</option
                                                    ><option value="500336">Akanke</option>
                                                </select>
                                                <span id="box1Counter" class="countLabel"></span>
                                                <select id="box1Storage"></select>
                                            </div>
                                            <div class="mws-dualbox-col2">
                                                <button id="to2" type="button">&gt;</button>
                                                <button id="allTo2" type="button">&gt;&gt;</button>
                                                <div class="clear"></div>
                                                <button id="allTo1" type="button">&lt;&lt;</button>
                                                <button id="to1" type="button">&lt;</button>
                                            </div>
                                            <div class="mws-dualbox-col3">
	                                            <div class="mws-dualbox-filter clearfix">
    	                                            <label for="box2Filter">Filter</label>
        	                                        <input type="text" id="box2Filter" class="mws-textinput" />
            	                                    <button type="button" id="box2Clear">X</button>
                                                </div>

                                                <select id="box2View" multiple="multiple" size="15"></select>
                                                <span id="box2Counter" class="countLabel"></span>
                                                <select id="box2Storage"></select>
                                            </div>
                                        </div>
                                    </div>
                    			</div>
                            </div>
                    		<div class="mws-button-row">
                    			<input type="submit" value="Submit" class="mws-button red" />
                    			<input type="reset" value="Reset" class="mws-button gray" />
                    		</div>
                        </form>
                    </div>    	
                </div>
                
            	<div class="mws-panel grid_8">
                	<div class="mws-panel-header">
                    	<span class="mws-i-24 i-text-styling-3">WYSIWYG + File Manager (Try Inserting an Image)</span>
                    </div>
                    <div class="mws-panel-body">
                    	<form class="mws-form" action="form_elements.html">
                        	<div class="mws-form-row">
                            	<label>WYSIWYG</label>
                                <div class="mws-form-item">
                                	<textarea id="elrte" cols="auto" rows="auto"></textarea>
                                </div>
                            </div>
                            <div class="mws-button-row">
                            	<input type="submit" value="Submit" class="mws-button red" />
                            </div>
                        </form>
                    </div>
                </div>
                
            	<div class="mws-panel grid_8">
                	<div class="mws-panel-header">
                    	<span class="mws-i-24 i-check">Validation</span>
                    </div>
                    <div class="mws-panel-body">
                    	<form id="mws-validate" class="mws-form" action="form_elements.html">
                        	<div id="mws-validate-error" class="mws-form-message error" style="display:none;"></div>
                        	<div class="mws-form-inline">
                            	<div class="mws-form-row">
                                	<label>Required Validation</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" name="reqField" class="mws-textinput required" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Email Validation</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" name="emailField" class="mws-textinput required email" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>URL Validation</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" name="urlField" class="mws-textinput required url" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Digit Validation</label>
                                	<div class="mws-form-item large">
                                    	<input type="text" name="ageField" class="mws-textinput required digits" />
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Select Box Validation</label>
                                	<div class="mws-form-item large">
                    					<select class="required" name="selectBox">
                                        	<option></option>
                    						<option>Option 1</option>
                    						<option>Option 3</option>
                    						<option>Option 4</option>
                    						<option>Option 5</option>
                    					</select>
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>File Input Validation</label>
                                	<div class="mws-form-item large">
                                    	<input type="file" name="picture" class="required" />
                                        <label for="picture" class="error" generated="true" style="display:none"></label>
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label>Spinner Validation</label>
                                	<div class="mws-form-item medium">
                                        <input type="text" id="s4" name="spinner" class="mws-textinput required" value="10" />
                                        <label for="s4" class="error" generated="true" style="display:none"></label>
                                    </div>
                                </div>
                    			<div class="mws-form-row">
                    				<label>Radiobutton Validation</label>
                    				<div class="mws-form-item large">
                                    	<ul class="mws-form-list">
                                        	<li><input id="gender_male" type="radio" name="gender" class="required" /> <label for="gender_male">Male</label></li>
                                        	<li><input id="gender_female" type="radio" name="gender" /> <label for="gender_female">Female</label></li>
                                        </ul>
                                        <label for="gender" class="error plain" generated="true" style="display:none"></label>
                    				</div>
                    			</div>
                            </div>
                            <div class="mws-button-row">
                            	<input type="submit" class="mws-button red" />
                            </div>
                        </form>
                    </div>    	
                </div>
                
                <!-- Panels End -->
            </div>
            <!-- Inner Container End -->
                       
            <!-- Footer -->
            <div id="mws-footer">
            	Copyright Your Website 2012. All Rights Reserved.
            </div>
            
        </div>
        <!-- Main Container End -->
        
    </div>

</body>
</html>
